---
title: Reference
description: List of everything in Takumi.
icon: BookMarked
---

## Node Types

### Container

A container node is used to group other nodes and arrange them in a layout.

<TypeTable
  type={{
    children: {
      type: 'Node[]',
      description: 'Children nodes',
    },
    style: {
      type: 'Style',
      description: 'Styling properties for this container',
      typeDescriptionLink: '#style-properties'
    },
    tw: {
      type: 'string',
      description: 'Tailwind classes for this container node',
    },
  }}
/>

### Text

A text node displays text.

<TypeTable
  type={{
    text: {
      type: 'string',
      required: true,
      description: 'Text content to be displayed',
    },
    style: {
      type: 'Style',
      description: 'Styling properties for this container',
      typeDescriptionLink: '#style-properties'
    },
    tw: {
      type: 'string',
      description: 'Tailwind classes for this container node',
    },
  }}
/>

### Image

An image node displays rasterized or svg images.

<TypeTable
  type={{
    src: {
      type: 'string',
      required: true,
      description: 'The source URL / persistent image key to the image',
    },
    width: {
      type: 'number',
      description: 'Overwrite the intrinsic width of the image',
    },
    height: {
      type: 'number',
      description: 'Overwrite the intrinsic height of the image',
    },
    style: {
      type: 'Style',
      description: 'Styling properties for this container',
      typeDescriptionLink: '#style-properties'
    },
    tw: {
      type: 'string',
      description: 'Tailwind classes for this container node',
    },
  }}
/>

## Style Properties

<table>
  <thead>
    <tr>
      <th>Property</th>
      <th>Property Expanded</th>
      <th>Supported Values</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colSpan={2}>`display`</td>
      <td>`flex`, `grid`, `block`, `inline`</td>
    </tr>
    <tr>
      <td colSpan={2}>`position`</td>
      <td>`relative`, `absolute`</td>
    </tr>
    <tr>
      <td colSpan={2}>`width`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td colSpan={2}>`height`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td colSpan={2}>`maxWidth`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td colSpan={2}>`maxHeight`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td colSpan={2}>`minWidth`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td colSpan={2}>`minHeight`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td colSpan={2}>`aspectRatio`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`padding`</td>
      <td>`paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`margin`</td>
      <td>`marginTop`, `marginRight`, `marginBottom`, `marginLeft`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`inset`</td>
      <td>`top`, `right`, `bottom`, `left`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`border`</td>
      <td>`borderWidth` (`borderTopWidth`, `borderRightWidth`, `borderBottomWidth`, `borderLeftWidth`), `borderColor`</td>
      <td>Only `solid` style is supported</td>
    </tr>
    <tr>
      <td>`borderRadius`</td>
      <td>`borderTopLeftRadius`, `borderTopRightRadius`, `borderBottomRightRadius`, `borderBottomLeftRadius`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td rowSpan={3}>`flex`</td>
      <td>`flexBasis`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`flexGrow`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`flexShrink`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td rowSpan={10}>Flexbox</td>
      <td>`flexDirection`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`justifyContent`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`justifySelf`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`alignContent`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`justifyItems`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`alignItems`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`alignSelf`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`justifySelf`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`flexWrap`</td>
      <td>`nowrap`, `wrap`, `wrap-reverse`</td>
    </tr>
    <tr>
      <td>`gap`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td colSpan={2}>`objectFit`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td colSpan={2}>`objectPosition`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`overflow`</td>
      <td>`overflowX`, `overflowY`</td>
      <td>`visible`, `hidden`</td>
    </tr>
    <tr>
      <td rowSpan={6}>`background`</td>
      <td>`backgroundImage`</td>
      <td>`linear-gradient()`, `radial-gradient()`, `noise-v1()`, `url()`</td>
    </tr>
    <tr>
      <td>`backgroundPosition`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`backgroundSize`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`backgroundRepeat`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`backgroundColor`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`backgroundClip`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td colSpan={2}>`boxShadow`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td rowSpan={2}>Clip</td>
      <td>`clipPath`</td>
      <td>`inset()`, `circle()`, `ellipse()`, `polygon()`, `path()`</td>
    </tr>
    <tr>
      <td>`clipRule`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td rowSpan={4}>`mask`</td>
      <td>`maskImage`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`maskSize`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`maskPosition`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`maskRepeat`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td rowSpan={3}>`transform`</td>
      <td>`translate`</td>
      <td rowSpan={3}>Only 2D is supported</td>
    </tr>
    <tr>
      <td>`rotate`</td>
    </tr>
    <tr>
      <td>`scale`</td>
    </tr>
    <tr>
      <td colSpan={2}>`transformOrigin`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td rowSpan={8}>Grid</td>
      <td>`gridAutoColumns`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`gridAutoRows`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`gridAutoFlow`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`gridColumn`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`gridRow`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`gridTemplateColumns`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`gridTemplateRows`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`gridTemplateAreas`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td rowSpan={21}>Typography</td>
      <td>`textOverflow`</td>
      <td>`ellipsis`, `clip`, custom character</td>
    </tr>
    <tr>
      <td>`textTransform`</td>
      <td>`none`, `uppercase`, `lowercase`, `capitalize`</td>
    </tr>
    <tr>
      <td>`fontStyle`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`color`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`textShadow`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`fontSize`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`fontFamily`</td>
      <td>Font fallback supported</td>
    </tr>
    <tr>
      <td>`lineHeight`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`fontWeight`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`fontVariationSettings`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`fontFeatureSettings`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`lineClamp`</td>
      <td>number, `1 "ellipsis character"`</td>
    </tr>
    <tr>
      <td>`textAlign`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`letterSpacing`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`wordSpacing`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`overflowWrap`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td>`wordBreak`</td>
      <td>`normal`, `break-all`, `keep-all`, `break-word`</td>
    </tr>
    <tr>
      <td>`whiteSpace`</td>
      <td>`normal`, `pre`, `pre-wrap`, `pre-line`, `<text-wrap-mode> <white-space-collapse>`</td>
    </tr>
    <tr>
      <td>`textWrapMode`</td>
      <td>`wrap`, `nowrap`</td>
    </tr>
    <tr>
      <td>`textWrap`</td>
      <td>`wrap`, `nowrap`</td>
    </tr>
    <tr>
      <td>`whiteSpaceCollapse`</td>
      <td>`preserve`, `collapse`, `preserve-spaces`, `preserve-breaks`</td>
    </tr>
    <tr>
      <td colSpan={2}>`boxSizing`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td colSpan={2}>`opacity`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td colSpan={2}>`imageRendering`</td>
      <td>`auto`, `smooth`, `pixelated`</td>
    </tr>
    <tr>
      <td colSpan={2}>`filter`</td>
      <td>Except `blur()` and `drop-shadow()`</td>
    </tr>
    <tr>
      <td>`WebkitTextStroke`</td>
      <td>`WebkitTextStrokeWidth`, `WebkitTextStrokeColor`</td>
      <td>Supported</td>
    </tr>
    <tr>
      <td rowSpan={2}>`textDecoration`</td>
      <td>`textDecorationLine`</td>
      <td>`underline`, `line-through`, `overline`</td>
    </tr>
    <tr>
      <td>`textDecorationColor`</td>
      <td>Supported</td>
    </tr>
  </tbody>
</table>
